<!DOCTYPE html>
<html>
<head>
  <title>capturing video and video</title>
  <style type="text/css">
    html, body{
      height: 100%;
      width: 100%;
    }
    *{margin: 0;padding: 0;}
    #video{
      width: 100%;
      height: 100%;
      background-color: #000000;
    }
  </style>
</head>
<body>
  <script src="./polyfill.js"></script>
  <video id="video" autoplay="autoplay" controls="controls"></video>
  <script type="text/javascript">
    navigator
      .mediaDevices
      .getUserMedia({
        video: {
          facingMode: 'environment'
        },
        audio: false
      })
      .then(function(mediaStream) {
        var video = document.querySelector('video');

        if ("srcObject" in video) {
          video.srcObject = mediaStream
        } else {
          video.src = window.URL && window.URL.createObjectURL(mediaStream) || stream
        }

        video.onloadedmetadata = function(e) {
          video.play();
        };
      })
      .catch(function(error) {
        alert(error)
      });

    navigator
      .mediaDevices
      .enumerateDevices()
      .then(function(MediaDeviceInfo) {
        console.log(MediaDeviceInfo);
      })

    navigator
      .mediaDevices
      .getSupportedConstraints()
  </script>
</body>
</html>